<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>会员管理</el-breadcrumb-item>
				<el-breadcrumb-item>编辑会员</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		
		<div class="content-box">
			<el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="账户信息" name="account">
						<div class="tab-content">
							<el-form-item label="所属站点">
								<el-select v-model="model.siteId" placeholder="请选择...">
									<el-option v-for="item in siteList"
										:key="item.id"
										:label="item.title"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="所属组别">
								<el-select v-model="model.groupId" placeholder="请选择...">
									<el-option v-for="item in groupList"
										:key="item.id"
										:label="item.title"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="账户状态">
								<el-radio-group v-model="model.status">
									<el-radio-button label="0">正常</el-radio-button>
									<el-radio-button label="1">待验证</el-radio-button>
									<el-radio-button label="2">待审核</el-radio-button>
									<el-radio-button label="3">黑名单</el-radio-button>
								</el-radio-group>
							</el-form-item>
							<el-form-item prop="userName" label="用户名">
								<el-input v-model="model.userName" placeholder="唯一名称，不可重复"></el-input>
							</el-form-item>
							<el-form-item label="登录密码" v-if="model.id>0">
								<el-input v-model="model.password" placeholder="登录密码,不修改请留空"></el-input>
							</el-form-item>
							<el-form-item prop="password" label="登录密码" v-else>
								<el-input show-password v-model="model.password" placeholder="必填，最少6位英文字母"></el-input>
							</el-form-item>
							<el-form-item prop="email" label="电子邮箱">
								<el-input v-model="model.email" placeholder="非必填，电子邮箱不可重复"></el-input>
							</el-form-item>
							<el-form-item prop="phone" label="手机号码">
								<el-input v-model="model.phone" placeholder="非必填，手机号不可重复"></el-input>
							</el-form-item>
							<el-form-item label="账户余额" v-if="model.id>0">
								{{model.amount}}
							</el-form-item>
							<el-form-item label="账户积分" v-if="model.id>0">
								{{model.point}}
							</el-form-item>
							<el-form-item label="经验值" v-if="model.id>0">
								{{model.exp}}
							</el-form-item>
						</div>
					</el-tab-pane>
					<el-tab-pane label="个人资料" name="info">
						<div class="tab-content">
							<el-form-item label="会员头像">
								<dt-upload v-model="model.avatar"></dt-upload>
							</el-form-item>
							<el-form-item label="真实姓名">
								<el-input v-model="model.realName" placeholder="非必填，可空"></el-input>
							</el-form-item>
							<el-form-item prop="sex" label="性别">
								<el-radio-group v-model="model.sex">
									<el-radio-button label="保密">保密</el-radio-button>
									<el-radio-button label="男">男</el-radio-button>
									<el-radio-button label="女">女</el-radio-button>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="生日">
								<el-date-picker v-model="model.birthday" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
							</el-form-item>
							<el-form-item label="注册时间" v-if="model.id>0">
								{{model.regTime}}
							</el-form-item>
							<el-form-item label="注册IP" v-if="model.id>0">
								{{model.regIp}}
							</el-form-item>
							<el-form-item label="最后登录时间" v-if="model.id>0">
								{{model.lastTime}}
							</el-form-item>
							<el-form-item label="最后登录IP" v-if="model.id>0">
								{{model.lastIp}}
							</el-form-item>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
		
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" :loading="loading" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	import DtUpload from '../../components/DtUpload.vue'
	
	export default {
		components: {
			DtUpload
		},
		props: {
			id: 0
		},
		data() {
			return {
				activeName: 'account', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				loading: false,
				siteList: [],//站点列表
				groupList: [], //会员组列表
				model: {
					id: 0,
					userId: null,
					siteId: null,
					groupId: null,
					groupTitle: null,
					userName: null,
					email: null,
					phone: null,
					password: null,
					avatar: null,
					realName: null,
					sex: '保密',
					birthday: null,
					amount: 0,
					point: 0,
					exp: 0,
					status: 0,
					regIp: null,
					regTime: null,
					lastIp: null,
					lastTime: null,
				},
				rules: {
					siteId: [
						{ required: true, message: '请选择所属站点', trigger: 'change' }
					],
					groupId: [
						{ required: true, message: '请选择所属会员组', trigger: 'change' }
					],
					userName: [
						{ required: true, message: '请输入登录用户名', trigger: 'blur' },
						{ min: 3, max: 128, message: '长度在 3 到 128 个字符', trigger: 'blur' },
						{ pattern: /^[a-zA-Z0-9_]*$/, message: '只能是字母数字下划线', trigger: 'blur' }
					],
					email: [
						{ pattern: /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/, message: '邮箱格式有误', trigger: 'blur' }
					],
					phone: [
						{ pattern: /^1[0-9]{10}$/, message: '手机号码格式不正确', trigger: 'blur' }
					],
					password: [
						{ required: true, message: '请输入登录密码', trigger: 'blur' },
						{ min: 6, max: 128, message: '密码长度在至少6位', trigger: 'blur' },
						{ pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/, message: '以字母开头至少包含数字', trigger: 'blur' }
					],
					sex: [
						{ required: true, message: '请选择性别', trigger: 'change' }
					]
				}
			}
		},
		methods: {
			//初始化数据
			initData() {
				let _this = this; //当前页面
				if (_this.id) {
					_this.$api.request({
						url: '/admin/member/' + _this.id,
						loading: true,
						success(res) {
							//赋值给model
							Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
						}
					});
				}
				//加载站点列表
				_this.$api.request({
					url: '/admin/site/view/0',
					success(res) {
						_this.siteList = res.data
					}
				});
				//加载会员组列表
				_this.$api.request({
					url: '/admin/member/group/view/0',
					success(res) {
						_this.groupList = res.data
					}
				});
			},
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve()
					});
				});
				Promise.all([f1]).then(() => {
					//提交表单,Id大于0则修改，否则添加
					if (_this.model.id > 0) {
						_this.$api.request({
							method: 'put',
							url: '/admin/member/' + _this.model.userId,
							data: _this.model,
							successMsg: '修改会员已成功',
							beforeSend() {
								_this.loading = true
							},
							success(res) {
								//跳转列表页
								_this.$common.linkUrl('/member/list');
							},
							complete() {
								_this.loading = false
							}
						});
					} else {
						_this.$api.request({
							method: 'post',
							url: '/admin/member',
							data: _this.model,
							successMsg: '新增会员已成功',
							beforeSend() {
								_this.loading = true
							},
							success(res) {
								//重置表单
								_this.$refs['editForm'].resetFields();
							},
							complete() {
								_this.loading = false
							}
						});
					}
				})
			},
		},
		created() {
			this.initData();
		}
	}
</script>